<template>
  <el-card class="box-card" style="min-height: 800px">
    <el-table
        :data="schedulings"
        :row-style="{ height: '75px' }"
        style="width: 100%">
      <template #empty>
        未来几日暂无排班信息
      </template>
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          >
      </el-table-column>
      <el-table-column
          label="日期"
      >
        <template v-slot="scope">
          {{ getDateStr(new Date(scope.row.starttime)) }}
        </template>
      </el-table-column>
      <el-table-column
          label="开始时间"
      >
        <template v-slot="scope">
          {{ getDateTimeStr(new Date(scope.row.starttime)) }}
        </template>
      </el-table-column>
      <el-table-column
          label="结束时间"
          >
        <template v-slot="scope">
          {{ getDateTimeStr(new Date(scope.row.endtime)) }}
        </template>
      </el-table-column>
      <el-table-column
          label="就诊地址"
          >
        <template v-slot="scope">
          {{ scope.row.roomAddress == null ? '' : clinic.name + scope.row.roomAddress.floor + '层' + scope.row.roomAddress.roomno }}
        </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="挂号费用"
         >
      </el-table-column>
      <el-table-column
          prop="count"
          label="总数"
          >
      </el-table-column>
      <el-table-column
          prop="leaveCount"
          label="剩余数量"
          >
        <template v-slot="scope">
                <span
                    :class="{red: scope.row.leaveCount == 0,green: scope.row.leaveCount > 0}">{{ scope.row.leaveCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          >
        <template v-slot="scope">
                <span :class="{red: scope.row.state == 0,green: scope.row.state == 1}" style="display: flex"><span
                    style="font-size: 20px">•</span>{{ scope.row.state == 0 ? '已请假' : '正常就诊' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import { getDateStr, getDateTimeStr } from "@/util/DateUtil";
const schedulings = ref([])
const user = JSON.parse(sessionStorage.getItem("user"))
const initScheduling = ()=>{
  axios.get('scheduling/selByDoc',{params:{did:user.id}}).then(res=>{
    if (res.data.code == 200){
      schedulings.value = res.data.data
    }else {
      ElMessage.error("查询排班信息失败")
    }
  })
}
onMounted(()=>{
  initScheduling()
  initClinic()
})
const clinic = ref({hospital:{}})
const initClinic = ()=>{
  axios.get('/clinic/getClinicById',{params:{id : user.cid}}).then(res=>{
    if (res.data.code == 200){
      clinic.value = res.data.data
    }else {
      ElMessage.error(res.data.msg)
    }
  })
}
</script>
<style scoped>
.red {
  color: #f56c6c;
}

.green {
  color: #67c23a;
}
</style>